<!DOCTYPE html>
<html lang="en">
<head>
<!--    zpl-->
    <meta charset="UTF-8">
    <title>后台管理界面</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../css/background.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>

</head>
<body>

<div id="app">
    <el-container>
        <el-header>
            <div>
                <span class="logo"><a href="background.html" style="color: white">三人行后台管理</a></span>
                <a class="index" href="../index.html" >前台首页</a>
                <el-dropdown trigger="click" class="loginbar">
                    <span class="el-dropdown-link" style="cursor: pointer;">
                        {{username}}<i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item class="clearfix">
                            评论
                            <el-badge class="mark" :value="12" />
                        </el-dropdown-item>
                        <el-dropdown-item class="clearfix">
                            回复
                            <el-badge class="mark" :value="3" />
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside style="width: 200px;background-color: #EEEEEE">
                <el-row class="tac" style="width: 200px;height: 100%;background-color: #EEEEEE">

                    <el-col span="12" style="width: 200px;height: 100%">
                        <h4 style="margin-left: 10px"></h4>
                        <el-menu @select="selectMenu"
                                default-active="2"
                                class="el-menu-vertical-demo"
                                background-color="#EEEEEE"
                                text-color="black"
                                active-text-color="#009688">


                            <el-menu-item v-for="menu in menus" :index="menu.name">
                                <i :class="menu.class"></i>
                                <span slot="title">{{menu.name}}</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main style="background-color: white">
                <div id="hot">
                    <div>
                        <el-row :gutter="20">
                            <div>
                                <el-col :span="6">
                                    <div>
                                        <el-statistic group-separator="," :precision="2" :value="value2" title="今日总收入"></el-statistic>
                                    </div>
                                </el-col>

                                <el-col :span="6">
                                    <div>
                                        <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
                                            <template slot="prefix">
                                                <i class="el-icon-s-flag" style="color: red"></i>
                                            </template>
                                            <template slot="suffix">
                                                <i class="el-icon-s-flag" style="color: blue"></i>
                                            </template>
                                        </el-statistic>
                                    </div>
                                </el-col>
                            </div>
                            <div>
                                <el-col :span="10">
                                    <el-card shadow="hover" style="width: 100%;">
                                        <div slot="header" class="clearfix">
                                            <span>文嘉《明日歌》</span>
                                            <el-button style="float: right; padding: 3px 0" type="text">暂停</el-button>
                                        </div>
                                        <div style="font-size: 18px;text-align: center; ">明日复明日</div>
                                        <div style="font-size: 18px;text-align: center;">明日何其多</div>
                                        <div style="font-size: 18px;text-align: center;">我生待明日</div>
                                        <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
                                        <div style="margin-top: 40px;"></div>
                                        <el-statistic
                                                ref="statistic"
                                                format="HH:mm:ss"
                                                :value="deadline4"
                                                title="距离明日："
                                                time-indices>
                                        </el-statistic>
                                    </el-card>
                                </el-col>
                            </div>
                        </el-row>
                    </div>
                    <div id="legend" style="width: 100%;height: 100%">
                        <div id="type" style="width: 700px; height: 400px;float:left;">

                        </div>
                        <div id="income" style="width: 700px; height: 400px;float:left;margin-top: 40px">

                        </div>
                    </div>
                </div>
                <div id="tabs">
                    <el-tabs v-model="currentTab" type="border-card" style="height: 100%; background-color: white" @tab-remove="removeTab" closable >
                        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.name" :name="tab.name">
                            <iframe :src="tab.url" ></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-main>
        </el-container>
<!--        <el-footer style="background-color: #c6e2ff">尾部</el-footer>-->
    </el-container>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            menus: [
                {name: "商品管理", url: "phoneManage.html", class:"el-icon-goods"},
                {name: "订单管理", url: "reportManage.html", class: "el-icon-s-order"},
                {name: "成员管理", url: "employeeManage.html", class: "el-icon-user"},
                {name: "订单明细", url: "itemManage.html", class: "el-icon-s-release"}
            ],
            tabs: [],
            currentTab: "",
            like: true,
            value1: 4154.564,
            value2: "",
            title: '今年的增长',
            deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
            username: "无名氏",
            months: ['一月',"二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            ipad: [],
            phone: [],
            comp : [],
            parts: [],
            sales: []
        },
        created(){
            var params = new URLSearchParams();
            this.months.forEach(month=>{
                params.append("months", month);
            });
            axios.get("../BackNameServlet.s").then(res=>{
                console.log(res.data);
                if (res.data != null){
                    this.username = res.data.username;
                    this.value2 = res.data.total;
                }else {
                    // location.href = "backLogin.html";
                }
            });
            axios.post("../QueryQXTServlet.s", params).then(res=>{
                res.data.data.forEach(month=>{
                    if(month.length > 0){
                        this.ipad.push(month[0].sum);
                        this.phone.push(month[1].sum);
                        this.comp.push(month[2].sum);
                        this.parts.push(month[3].sum);
                    }else {
                        this.ipad.push(0);
                        this.phone.push(0);
                        this.comp.push(0);
                        this.parts.push(0);
                    }

                })
                // 类型销量
                var myChart = echarts.init(document.getElementById('type'));
                option = {
                    title: {
                        text: '类型销量统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['平板', '手机', '电脑', '耳机配件']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.months
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '平板',
                            type: 'line',
                            stack: 'Total',
                            data: this.ipad
                        },{
                            name: '手机',
                            type: 'line',
                            stack: 'Total',
                            data: this.phone
                        },{
                            name: '电脑',
                            type: 'line',
                            stack: 'Total',
                            data: this.comp
                        },{
                            name: '耳机配件',
                            type: 'line',
                            stack: 'Total',
                            data: this.parts
                        },
                    ]
                };
                myChart.setOption(option);
            });
            axios.post("../QueryZZTServlet.s",params).then(res=>{
                console.log(res.data.data);
                res.data.data.forEach(sale=>{
                    if (sale.length > 0){
                        this.sales.push(sale[0].sum)
                    }else {
                        this.sales.push(0);
                    }
                });
                console.log(this.sales)
                var myChart2 = echarts.init(document.getElementById('income'));
                option1 = {
                    title: {
                        text: '月销售统计'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.months
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.sales,
                            type: 'bar'
                        }
                    ]
                };
                myChart2.setOption(option1);
            })

        },
        methods: {
            selectMenu(name) {
                // 检查该网页是否打开
                // 打开就返回该页面
                let tab = this.tabs.find(tab => {
                    if (name == tab.name) {
                        return tab;
                    }
                });
                if (tab) {
                    this.currentTab = name;
                    return;
                }
                // 在菜单数组中查找菜单对象
                this.menus.forEach(menu => {
                    if (menu.name == name) {
                        this.tabs.push({
                            name: name,
                            url: menu.url
                        });
                        // 设置为当前页
                        this.currentTab = name;
                    }
                })
                var elTabs = document.querySelector("#tabs");
                elTabs.style.display = 'block';
                var hot = document.querySelector("#hot");
                hot.style.display = 'none';
            },
            removeTab(name) {
                let tabs = this.tabs;
                let activeName = this.currentTab;
                if (activeName === name) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === name) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.currentTab = activeName;
                this.tabs = tabs.filter(tab => tab.name !== name);
                if (this.tabs.length == 0){
                    var elTabs = document.querySelector("#tabs");
                    elTabs.style.display = 'none';
                    var hot = document.querySelector("#hot");
                    hot.style.display = 'block';
                }
            },

        }
    })
</script>
</body>
</html>